{% extends "base.html" %}

{% block body %}

<p class="fader faded-out" id="update-status-container"></p>

<script>
  var indicatorNode = goog.dom.$('update-status-container');
  updateCheckins(
      indicatorNode,
      function() {
        updateCheckinsForOtherUser(
            '{{ other_user_external_id|escapejs }}',
            indicatorNode,
            function() {
              indicatorNode.textContent += ' Computing the intersection...';
              loadIntersections(
                  '{{ other_user_external_id|escapejs }}',
                  function(intersectionsHtml) {
                    indicatorNode.textContent += ' Done!';
                    goog.dom.classes.addRemove(
                        indicatorNode, 'faded-in', 'faded-out');

                    setTimeout(
                        function() {
                          goog.dom.removeNode(indicatorNode);
                          var intersectionsNode = goog.dom.$('intersections');
                          intersectionsNode.innerHTML = intersectionsHtml;
                          goog.dom.classes.addRemove(
                              intersectionsNode, 'faded-out', 'faded-in');
                        }, 400);
                  });
            });
      });
</script>

<div class="fader faded-out" id="intersections">
</div>

{% endblock %}
